import React from 'react';
import {Tabs, Card} from "antd";
import {IdcardOutlined, NotificationOutlined, AliwangwangOutlined} from "@ant-design/icons";
import {StickyContainer, Sticky} from 'react-sticky';
import './css/index.css';
import WebSite from './components/WebSite'
import SmsBao from "./components/SmsBao";
import AliOss from "./components/AliOss";

const {TabPane} = Tabs;
const renderTabBar = (props, DefaultTabBar) => (
  <Sticky bottomOffset={80}>
    {({style}) => (
      <DefaultTabBar {...props} className="site-custom-tab-bar" style={{...style}}/>
    )}
  </Sticky>
);

const Index = () => {
  const currentActive = () => {
    // activeKey(value)
  }
  return (
    <StickyContainer className="site-card-border-less-wrapper" style={{padding: 0}}>
      <Card bordered={false}>
        <Tabs
          onChange={(key) => {
            currentActive(key)
          }}
          type="card"
          style={{
            width: 600,
          }}
          defaultActiveKey="1"
          renderTabBar={renderTabBar}>
          <TabPane
            tab={
              <span>
                <IdcardOutlined/>
                网站配置
              </span>
            }
            key="1">
            <WebSite/>
          </TabPane>
          <TabPane
            tab={
              <span>
                <NotificationOutlined/>
                SmsBao配置
              </span>
            } key="2">
            <SmsBao/>
          </TabPane>
          <TabPane
            tab={
              <span>
                <AliwangwangOutlined/>
                阿里OSS配置
              </span>
            } key="3">
            <AliOss/>
          </TabPane>
        </Tabs>
      </Card>
    </StickyContainer>
  );
};

export default Index;
